@import "color";

$width:140px;
$left:-161px;

.bs-sidebar{
  position: absolute;
  left: $left;
  width: $width;

  .bs-docs-sidebar.affix {
    width: $width;
    position: fixed;
    top: 70px;
  }
  .bs-docs-sidebar{

    .bs-docs-sidenav {
      margin-bottom: 20px;

      li {
        width: $width;
        margin-bottom: 9px;
        list-style: none;

        a{
          color: white;
          background-color: $mainColor;
          border-left: none;
          text-align: right;
          height: 30px;
          position: relative;
          display: block;
          padding: 4px 15px;
          font-size: 15px;
          font-weight: 500;
          width: $width;
          transition:width 1s;
          cursor: pointer;
          white-space: nowrap;
          box-shadow: rgb(136, 136, 136) 2px 3px 4px;
          padding-right: 15px;

          &:hover,&:focus{
            padding-left: 15px;
            text-decoration: none;
            font-weight: bold;
            background-color: $hoverColor;
            color: white;
            text-decoration: unset;
            width: $width +15px;
          }

          &:hover::before{
            border: 15px solid $hoverColor;
            border-left-color: $backColor;
          }

          &::before{
            position: absolute;
            content: '';
            border: 15px solid $mainColor;
            border-left-color: $backColor;
            left: -5px;
            top: 0;
          }




        }
      }

      .active{
        a{
          padding-left: 15px;
          font-weight: bold ;
          background-color: $hoverColor ;
          color: white;

          &::before{
            border: 15px solid $hoverColor;
            border-left-color: $backColor;
          }


        }
      }
    }
  }
}

